<template>
  <ul>
    <h3>id: {{$route.params.id}}</h3>
    <li>title: {{detail.title}}</li>
    <li>content: {{detail.content}}</li>
  </ul>
</template>

<script>
const MessageDetails = [
  {id: 1, title: 'Message001', content: 'message content001....'},
  {id: 3, title: 'Message003', content: 'message content003....'},
  {id: 5, title: 'Message005', content: 'message content005....'}
]
export default {
  name: "MessageDetail",
  data() {
    return {
      detail:[]
    }
  },
  mounted() {
    const id = this.$route.params.id
    this.detail = MessageDetails.find(detail => detail.id===id*1)
  },

  watch: {
    $route: function () { // 改变当前路由组件参数数据时自动调用
      console.log('$route()')
      const id = this.$route.params.id
      this.detail = MessageDetails.find(detail => detail.id===id*1)
    }
  }


}
</script>

<style scoped>

</style>
